<template>
  <ul class="firstList_body">
    <li v-for="item in ArticleList" :key="item.article_id">
      <a target="_blank" :href="`../articleDetail/${item.article_id}`">{{ item.article_title }}</a>
      <span>{{ parseTime(item.publish_time) }}</span>
    </li>
  </ul>
  <div v-if="ArticleList.length && showPagination" class="pt15">
    <Pagination :hideOnSinglePage="true" :current="page.current" :total="page.total" :page-size="page.pageSize" @change="onChange" />
  </div>

  <div class="pt80" v-if="requestComplete && ArticleList.length===0">
    <Empty description="暂无数据"/>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, PropType, reactive, ref, toRefs} from 'vue';
import { Empty , Pagination} from "ant-design-vue";
import {getArticleListApi} from "/@/api/article";
import { parseTime} from '/@/utils';
export default defineComponent({
  name: 'articleList',
  components: {  Empty, Pagination },
  props: {
    color:{
      type: String as PropType<string>,
      default:'DarkBlue'
    },
    itemId:{
      type: String as PropType<string>,
      default:''
    },

    size:{
      type: Number as PropType<number>,
      default:8
    },

    showPagination:{
      type: Boolean as PropType<boolean>,
      default:false
    }
  },
  setup(props) {
    const { itemId , size} = toRefs(props);
    const requestComplete = ref<boolean>(false);
    const ArticleList = ref([]);

    const page = reactive({
      current:1,
      total:0,
      pageSize:size
    })


    const getArticleList = async () => {
      let data = await getArticleListApi({itemId: itemId.value,current: page.current, size: page.pageSize});
      requestComplete.value=true;
      let { total , records , current } = data;
      if(total) {
        page.total = total;
        page.current = current;
        ArticleList.value = records;
      }
    };


    const onChange = (data) => {
      page.current = data
      getArticleList();
    }

    const init = () => {
      getArticleList();
    }

    onMounted(init);

    return { requestComplete ,ArticleList,parseTime,onChange,page}
  }
})
</script>

<style lang="less" scoped>
.firstList_body {
  padding-top: 10px;

  >li  {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 16px;
    line-height: 20px;
    color: #262626;

    &:first-child{
      margin-top: 0;
    }

    a{
      display: inline-block;
      width: calc(100% - 100px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:hover{
        color: @blue;
      }
    }

    >span {
      color: #999;
    }
  }
}

</style>
